<template>
  <view id="sales-task">
    <view class="task-time-box">
      <view class="left-box">
        <view class="title">任务倒计时</view>
        <view class="time-box">
          <text class="time">{{ taskHourTime }}</text>
          :
          <text class="time">{{ taskMinuteTime }}</text>
          :
          <text class="time">{{ taskSecondTime }}</text>
        </view>
        <view class="account">账号：{{ list.tb_name }}</view>
      </view>
      <view class="give-up-btn" @click="showGiveUpTaskModal = true">放弃任务</view>
    </view>
    <!-- 平台类型-->
    <view class="card">
      <view class="card-title">
        <view class="title shop-name">{{ getShopName2(list.shop_type) }}</view>
      </view>
    </view>
    <!-- 任务详情（主宝贝）-->
    <view class="card">
      <!-- 商品详情-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-goods"></view>
          <view class="title">目标商品</view>
        </view>
        <view class="card-content">
          <view class="goods-title">{{ list.goods_title }}</view>
          <view class="goods-info">
            <canvas class="goods-img" :canvas-id="'firstCanvasMain'">{{
              getNewGoodsImg('firstCanvasMain',list.goods_img)}}
            </canvas>
            <view class="goods-param-box">
              <view class="goods-param">{{ getShopName(list.shop_type) }}：
                <text class="content">{{ list.shop_name }}</text>
              </view>
              <view class="goods-param">搜索展示价格：
                <text class="content-price">{{ list.show_money }}</text>
              </view>
              <view class="goods-param">地址：
                <text class="content">{{ list.goods_address ? list.goods_address : "暂无" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 任务要求-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-task-request"></view>
          <view class="title">任务要求 - <b style="color: red;">请加入购物车一起下单</b></view>
        </view>
        <view class="card-content">
          <view class="card-row-container">
            <view class="row-title">
              拍下单价：
            </view>
            <view class="row-content">
              <view class="black-style">{{ list.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              购买数量：
            </view>
            <view class="row-content">
              <view class="theme-style">{{ list.buy_num }} 件</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              应付总金额：
            </view>
            <view class="row-content">
              <view class="black-style">{{ list.buy_num * list.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              拍下的商品规格：
            </view>
            <view class="row-content">
              <view class="black-style">{{ list.sku }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 校验商品-->
      <view class="card-content" v-if="!show[0]">
        <view class="card-row">
          <view class="card-input-box">
            <view class="input-box">
              <input class="input" :placeholder="stickTypeData[stickType]" type="text" v-model="tbPassword[0]"/>
              <image v-show="tbPassword[0]" class="clear-btn" @click="tbPassword[0] = ''"
                     src="../../static/img/clear.png"
                     mode=""></image>
            </view>
            <button class="check-btn" @click="matchGoods(list.product_id, tbPassword[0], 0)">
              {{ checkBtnTitle[stickType] }}
            </button>
          </view>
        </view>
        <view class="tips marginStyle" v-if="show[0]">核对成功</view>
      </view>
    </view>
    <!-- 任务详情-->
    <view class="card" v-for="(de, deIndex) in  list.deputyTaskIfo" :key="deIndex">
      <!-- 商品详情-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-goods"></view>
          <view class="title">目标商品</view>
        </view>
        <view class="card-content">
          <view class="goods-title">{{ de.goods_title | stars }}</view>
          <view class="goods-info">
            <canvas class="goods-img" :canvas-id="'firstCanvas' + deIndex">{{ getNewGoodsImg('firstCanvas' +
              deIndex,de.goods_img)}}
            </canvas>
            <view class="goods-param-box">
              <view class="goods-param">{{ getShopName(list.shop_type) }}：
                <text class="content">{{ list.shop_name }}</text>
              </view>
              <view class="goods-param">搜索展示价格：
                <text class="content-price">{{ de.showMoney }}</text>
              </view>
              <view class="goods-param">地址：
                <text class="content">{{ list.goods_address ? list.goods_address : "暂无" }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 任务要求-->
      <view style="" v-if="checkShopNameStatus">
        <view class="card-title">
          <view class="icon-style el-icon-ali-task-request"></view>
          <view class="title">任务要求 - <b style="color: red;">请加入购物车一起下单</b></view>
        </view>
        <view class="card-content">
          <view class="card-row-container">
            <view class="row-title">
              拍下单价：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              购买数量：
            </view>
            <view class="row-content">
              <view class="theme-style">{{ de.buy_num }} 件</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              应付总金额：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.buy_num * de.pay_money }}</view>
            </view>
          </view>
          <view class="card-row-container">
            <view class="row-title">
              拍下的商品规格：
            </view>
            <view class="row-content">
              <view class="black-style">{{ de.sku }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 校验商品-->
      <view class="card-content" v-if="!show[deIndex+1]">
        <view class="card-row">
          <view class="card-input-box">
            <view class="input-box">
              <input class="input" :placeholder="stickTypeData[stickType]" type="text" v-model="tbPassword[deIndex+1]"/>
              <image v-show="tbPassword[deIndex+1]" class="clear-btn" @click="tbPassword[deIndex+1] = ''"
                     src="../../static/img/clear.png"
                     mode=""></image>
            </view>
            <button class="check-btn" @click="matchGoods(de.product_id, tbPassword[deIndex+1], deIndex+1)">
              {{ checkBtnTitle[stickType] }}
            </button>
          </view>
        </view>
        <view class="tips marginStyle" v-if="show[deIndex+1]">核对成功</view>
      </view>
    </view>

    <!-- 商家要求-->
    <view class="card" style="background:#99cc33">
      <view class="card-title">
        <view class="icon-style el-icon-ali-note-1"></view>
        <view class="title">商家要求</view>
      </view>
      <view class="card-content">
        <view class="card-row-container" style="border-bottom: 0;">
          <view class="row-content">
            <view class="black-style" style="color: red;font-size:24upx;line-height:30px">{{ list.remark }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索关键词-->
    <view class="card">
      <view class="card-title">
        <view class="icon-style el-icon-ali-search-key"></view>
        <view class="title">搜索关键词</view>
      </view>
      <view class="card-content">
        <view class="qrcode-box" v-if="list.entrance_type == 3">
          <view class="note">
            长按保存图片，{{
            tbTm.indexOf(list.shop_type) >= 0 ? storeName[list.shop_type] : "微信"
            }}扫一扫打开
            <!--tbTm.indexOf(list.shop_type) >= 0 ? "淘宝app" : "微信"-->
          </view>
          <view>
            <image @longtap="saveImg(list.keyword)" class="qrcode-img" :src="list.keyword" mode=""></image>
          </view>
        </view>
        <view class="card-row-container" v-else>
          <view class="row-title">
            {{ entranceName[list.entrance_type] }}:
          </view>

          <view class="row-content">
            <view class="keyword-text" v-if="keywordOptType == 1">{{ list.keyword }}</view>
            <view class="theme-style" v-else @click="copyKeyword(list.keyword)">
              <view class="keyword">{{ list.keyword }}</view>
              <view class="pinyin" v-if="!isLetter">
                <text class="letter" v-for="(py, pyIndex) in pyArr" :key="pyIndex">{{ py.py }}</text>
              </view>
            </view>
            <view class="copy-btn-box" v-if="copyShowType.indexOf(list.entrance_type) >= 0">
              <view class="copy-btn" v-if="keywordOptType == 1" @click="copyKeyword(list.keyword)">复制</view>
            </view>
          </view>
        </view>
        <view class="qrcode-box"
              v-if="list.keyword!==''&&list.keyword!==null&&(list.shop_type==1||list.shop_type==2)&&list.qr_img!=='none'">
          <view class="note">
            请使用淘宝APP扫码
          </view>
          <view>
            <image @longtap="saveImg(list.qr_img)" class="qrcode-img" :src="list.qr_img" mode=""></image>
          </view>
        </view>
        <!-- <view class="card-row-container">
					<view class="row-title">
						商品规格:
					</view>
					<view class="row-content">
						<view class="black-style">{{list.sku}}</view>
					</view>
				</view>
				<view class="require-box" style="margin-top: 32upx;">
					<view class="require-icon el-icon-ali-task-request"></view>
					<view class="require-content">
						商家要求：{{list.remark}}
					</view>
				</view> -->
      </view>
    </view>

    <!-- 校验商品-->
    <view class="card" v-if="shopNameConfig == 1">
      <view class="card-title">
        <view class="icon-style el-icon-ali-check"></view>
        <view class="title">核验店铺</view>
      </view>
      <view class="card-content">
        <view class="card-input-box">
          <view class="input-box">
            <input class="input" placeholder="请输入店铺名称进行核对" type="text" v-model="checkShopName"/>
            <image v-show="checkShopName" class="clear-btn" @click="checkShopName = ''" src="../../static/img/clear.png"
                   mode=""></image>
          </view>
          <button class="check-btn" @click="submitCheckShopName">核对</button>
        </view>
        <view class="tips marginStyle" v-if="checkShopNameStatus">核对成功 店铺：{{ shopNameText }}</view>
      </view>
    </view>
    <view class="card" v-if="checkShopNameStatus">
      <view class="card-title">
        <view class="icon-style el-icon-ali-check"></view>
        <view class="title" v-if="stickType === 4">核验店铺名</view>
        <view class="title" v-else>核验商品</view>
      </view>
      <view class="card-content">
        <view class="shop-name-box shop-name">{{ getShopName(list.shop_type) }}商家店铺名：
          <text class="name shop-name">{{ list.shop_name }}</text>
        </view>
        <view class="tips" v-if="list.shop_type == 3 || list.shop_type == 13">{{ list.goods_wpgpdd_show }}</view>
        <view class="card-row" v-if="list.shop_type == 15">
          <!-- <view class="tips">{{stickTypeData[stickType]}}</view> -->
          <view class="step" @click="isShowPddExamples = true">
            <view class="click-icon el-icon-ali-click"></view>
            <view class="step">点击查看复制链接方法</view>
          </view>
          <!--<view class="card-input-box">
            <view class="input-box">
              <input class="input" :placeholder="stickTypeData[stickType]" type="text" v-model="tbPassword" />
              <image v-show="tbPassword" class="clear-btn" @click="tbPassword = ''" src="../../static/img/clear.png" mode=""></image>
            </view>
            <button class="check-btn" @click="matchGoods">
              {{ checkBtnTitle[stickType] }}
            </button>
          </view>
          <view class="tips marginStyle" v-if="taskForm.shopStatus">核对成功 店铺：{{ shopNameText }}</view>
          <view class="require-box marginStyle">
            <view class="require-icon el-icon-ali-task-request"></view>
            <view class="require-content" style="color:red;font-size:18px">
              差额正负50可以下单 ！
              &lt;!&ndash; {{ list.goods_check_show }} &ndash;&gt;
            </view>
          </view>-->
        </view>
        <view
                class="card-row"
                v-if="shopDetailText.indexOf(list.shop_type) >= 0 && list.check_content">
          <view class="note">请在商品详情页找到缺少的1个字填入</view>
          <view class="center-text-box">{{ originalBeforeText }}<input
                  class="center-text-input"
                  type="text"
                  v-model="writeCenterText"
          />{{ originalAfterText }}
          </view
          >

          <view class="require-box">
            <view class="require-icon el-icon-ali-task-request"></view>
            <view class="require-content" style="color:red;font-size:18px">
              差额正负50可以下单 ！
              <!-- {{ list.goods_answer_show }} -->
            </view>
          </view>
        </view>
        <view v-if="taskForm.shopStatus">
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                实付金额：
              </view>
              <view class="input-box">
                <input
                        class="input"
                        placeholder="请输入实际付款金额"
                        type="text"
                        v-model="taskForm.otherPay"
                />
                <image
                        v-show="taskForm.otherPay"
                        class="clear-btn"
                        @click="taskForm.otherPay = ''"
                        src="../../static/img/clear.png"
                        mode=""
                ></image>
              </view>
            </view>
          </view>
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                付款截图：
              </view>
              <view class="upload-img-box" @click="chooseImage">
                <image
                        class="upload-img"
                        :src="taskForm.payImg"
                        mode=""
                        v-if="taskForm.payImg"
                ></image>
                <view class="upload-icon el-icon-ali-upload-img" v-else></view>
              </view>
            </view>
          </view>
          <view class="card-row">
            <view class="card-input-box">
              <view class="small-title">
                订单号：
              </view>
              <view class="input-box">
                <input
                        class="input"
                        placeholder="请输入订单号"
                        type="text"
                        v-model="taskForm.orderNum"
                />
                <image
                        v-show="taskForm.orderNum"
                        class="clear-btn"
                        @click="taskForm.orderNum = ''"
                        src="../../static/img/clear.png"
                        mode=""
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-title">
        <view class="icon-style el-icon-ali-note-1"></view>
        <view class="title">注意事项</view>
      </view>
      <view class="card-content">
        <view class="uni-list">
          <checkbox-group @change="checkboxChange">
            <label
                    class="uni-list-cell uni-list-cell-pd"
                    v-for="(item, index) in noteMatterList"
                    :key="index"
            >
              <view>
                <checkbox
                        class="check-box"
                        style="transform:scale(0.7)"
                        color="#FF5001"
                        :value="item.value"
                        :checked="item.checked"
                />
                <span style="vertical-align: middle;" v-if="index == 0"
                >已确认使用绑定的“<span
                        class="other-font"
                        style="font-size: 40upx;"
                >{{ list.tb_name }}</span
                >”账号下单</span
                >
                <span style="vertical-align: middle;" v-else-if="index == 1"
                >已确认<span class="other-font">未使用</span
                >信用卡/花呗方式下单</span
                >
                <span style="vertical-align: middle;" v-else-if="index == 2"
                >已确认下单金额以及下单要求符合<span class="other-font"
                >任务要求</span
                ></span
                >
              </view>
            </label>
          </checkbox-group>
        </view>
      </view>
    </view>
    <u-modal
            :showModal="isShowModal"
            title="提示"
            :showCancel="false"
            :confrimTitle="Dtime ? `确认（${Dtime}）` : `确认`"
            @confirmModal="Dtime ? '' : (isShowModal = false)"
    >
      <view>
        <view class="match-modal-title" style="color:red;font-size:5vw;font-weight: 548;">
          注：差额正负50可以下单 ！
        </view>
        <view class="match-modal-task-info" style="font-size:3.4vw">
          实付金额：
          <text style="color: red;">{{ list.sum_pay_money }}</text>
        </view>
        <scroll-view
                scroll-y="true"
                class="match-modal-task-info"
                style="color:red;font-size:4.8vw;line-height:8vw;height:160px;">
          商家要求（请严格按照商家要求下单）：
          <text style="font-size:4vw;font-weight: 700;">{{ list.remark }}</text>
        </scroll-view>
        <!-- <view class="match-modal-tips">注：仔细阅读商家要求，未按照要求做的可能会影响返款</view> -->
      </view>
    </u-modal>
    <u-modal
            :showModal="showGiveUpTaskModal"
            title="放弃任务"
            @cancleModal="showGiveUpTaskModal = false"
            @confirmModal="taskGiveUp"
    >
      <view>
        <view class="uni-list">
          <radio-group @change="reasonChange">
            <label
                    class="uni-list-cell uni-list-cell-pd"
                    v-for="(item, index) in giveUpReason"
                    :key="index"
            >
              <view style="margin-bottom: 8px;">
                <view style="display: inline-block;">
                  <radio
                          :value="item.value"
                          style="transform:scale(0.8)"
                          :checked="index === checkReason"
                  />
                </view>
                <view style="display: inline-block;vertical-align: middle;">{{
                  item.name
                  }}
                </view>
              </view>
            </label>
          </radio-group>
        </view>
      </view>
    </u-modal>
    <u-modal
            :showModal="showMsg"
            title="提示"
            :content="msg"
            :showCancel="false"
            @confirmModal="onHideMsg"
    ></u-modal>
    <u-modal
            :showModal="isShowPddExamples"
            title="复制商品链接方法"
            :showCancel="false"
            @confirmModal="isShowPddExamples = false"
    >
      <view>
        <view>第一步</view>
        <view
        >
          <image
                  style="width: 100%;height: 200upx;"
                  src="../../static/img/pdd_examples_img_1.png"
                  mode=""
          ></image
          >
        </view>
        <view>第二步</view>
        <view
        >
          <image
                  style="width: 100%;height: 400upx;"
                  src="../../static/img/pdd_examples_img_2.png"
                  mode=""
          ></image
          >
        </view>
      </view>
    </u-modal>
    <button
            v-if="unflag"
            class="sumbit-btn"
            :loading="loading"
            :disabled="loading"
    >
      提交任务({{ untime }} S)
    </button>
    <button
            v-else
            class="sumbit-btn"
            :loading="loading"
            :disabled="loading"
            @click="submitTask"
    >
      提交任务
    </button>
  </view>
</template>

<script>
  import {
    apiSalesTaskDragDetail,
    apiUploadToken,
    apiGiveUpTask,
    apiInquiryTbGoodsName,
    apiNewSubmitSaleTask
  } from "../../../http/apis.js";
  import {mapState} from "vuex";
  import qiniuUploader from "../../components/qiniu/qiniuUploader.js";
  import pyconst from "../../components/pyconst/vue-py.js";
  import uModal from "../../components/uni-modal/uni-modal.vue";

  export default {
    computed: {
      ...mapState(["token"]),
    },
    components: {
      pyconst,
      uModal,
    },
    data() {
      return {
        show: [],// 核对链接的数量长度
        Dtime: 1,
        Dtimer: null,
        msg: "",
        showMsg: false,
        list: {},
        stickType: 3,
        stickTypeData: {
          1: "请复制商品标题进行核对",
          2: "请复制商品链接进行核对",
          3: "请复制淘口令进行核对",
          4: "请复制店铺名进行核对",
        },
        checkBtnTitle: {
          1: "核对标题",
          2: "核对链接",
          3: "核对淘口令",
          4: "核对店铺名",
        },
        noteMatterList: [
          {
            value: "termOne",
            name: "已确认使用绑定的",
            checked: false,
          },
          {
            value: "termTwo",
            name: "已确认未使用信用卡/花呗/京东白条/淘客方式下单",
            checked: false,
          },
          {
            value: "termThree",
            name: "已确认下单金额以及下单要求符合任务要求",
            checked: false,
          },
        ],
        noteMatterStatus: false,
        showGiveUpTaskModal: false,
        giveUpReason: [
          {
            value: "2",
            name: "不想做了",
          },
          {
            value: "1",
            name: "找不到商品",
          },
          {
            value: "3",
            name: "现在没时间做",
          },
          {
            value: "4",
            name: "不能满足商家的要求",
          },
          {
            value: "5",
            name: "任务有问题（可联系QQ客服）",
          },
          {
            value: "7",
            name: "没有本金做任务",
          },
        ],
        checkReason: 0,
        pyArr: [],
        isLetter: false,
        keywordOptType: 1,
        isShowPddExamples: false,
        isShowModal: false,
        taskForm: {
          token: "",
          pushTaskId: "",
          termOne: 1,
          termTwo: 1,
          termThree: 1,
          termFour: 1,
          shopStatus: "",
          payImg: "",
          otherPay: "",
          orderNum: "",
        },
        uploadToken: "",
        matchTextStatus: "", //商品详情五个字
        writeCenterText: "",
        originalCenterText: "",
        originalAfterText: "",
        originalBeforeText: "",
        storeName: {
          1: "淘宝",
          2: "天猫",
          3: "京东",
          4: "阿里巴巴",
          13: "个性化",
          15: "拼多多",
          20: "抖音",
        },
        storeName2: {
          1: "淘宝任务（请打开淘宝APP下单）",
          2: "淘宝任务（请打开淘宝APP下单）",
          3: "京东任务（请打开京东APP下单）",
          4: "阿里巴巴任务（请打开1688APP下单）",
          13: "个性化任务",
          15: "拼多多任务（请打开拼多多APP下单）",
          20: "抖音任务",
        },
        // storeName:{
        //   1: '淘宝',
        //   2: '天猫',
        //   3: '京东',
        //   4: '1688',
        //   13: '唯品会',
        //   15: '拼多多'
        // },
        entranceName: {
          1: "关键词",
          2: "淘口令",
          4: "视频链接",
          5: "下单入口",
        },
        countdownNum: 50,
        checkTimer: null,
        timer: null,
        taskHourTime: "00",
        taskSecondTime: "00",
        taskMinuteTime: "00",
        pushTaskId: "",
        giveUpForm: {
          token: "",
          pushTaskId: "",
          giveUpType: 2,
        },
        tbPassword: [],
        loading: false,
        untime: 30,
        untimer: null,
        unflag: false,
        unNum: 0,
        tbTm: [1, 2, 20],
        copyShowType: [1, 2, 4, 5],
        otherShopType: [1, 2, 3, 13, 15],
        shopDetailText: [1, 2, 3, 13, 15],
        shopNameText: "",// 店铺名称
        checkShopName: "",
        checkShopNameStatus: true,
        shopNameConfig: 1,
        wrapPlanId: null,
      };
    },
    watch: {
      isShowModal() {
        if (this.isShowModal == true) {
          this.Dtime = 1;
          this.Dtimer = setInterval(() => {
            this.Dtime--;
            if (this.Dtime <= 0) {
              this.Dtime = 0;
              clearInterval(this.Dtimer);
            }
          }, 1000);
        } else {
          this.Dtime = 0;
          clearInterval(this.Dtimer);
        }
      },
    },
    filters: {
      // 给字符串加星星
      stars: function (val) {
        let title = ""
        if (val) {
          for (let i in val) {
            if ((parseInt(i) + 1) % 2 != 0) {
              title += "*";
            } else {
              title += val[i];
            }
          }
        }
        return title
      }
    },
    onShow() {
      this.platform = uni.getSystemInfoSync().platform;
    },
    onLoad(options) {
      this.pushTaskId = options.id;
      this.wrapPlanId = options.wrapPlan || null;
      this.taskForm.pushTaskId = this.pushTaskId;
      this.giveUpForm.pushTaskId = this.pushTaskId;
      this.giveUpForm.token = this.token;
      this.taskForm.token = this.token;
      clearInterval(this.timer);
      clearInterval(this.checkTimer);
      this.getTaskDetail();
      apiUploadToken({})
              .then((res) => {
                if (res.data.code == 1) {
                  this.uploadToken = res.data.msg;
                }
              })
              .catch((res) => {
                this.$msg.showToast(res.data.msg);
              });
    },
    methods: {
      onHideMsg() {
        this.showMsg = false;
        setTimeout(() => {
          uni.switchTab({
            url: "../home/home",
          });
        }, 500);
      },
      // 店铺名称核对
      submitCheckShopName() {
        if (!this.checkShopName) {
          this.$msg.showToast("请输入店铺名称");
          this.checkShopNameStatus = false;
          return;
        }
        if (this.checkShopName == this.shopNameText) {
          this.$msg.showToast("店铺核对成功");
          this.checkShopNameStatus = true;
        } else {
          this.$msg.showToast("店铺核对失败");
          this.checkShopNameStatus = false;
          return;
        }
      },
      // 提交任务
      submitTask() {
        if (this.shopNameConfig == 1) {
          if (!this.checkShopNameStatus) {
            this.$msg.showToast("请先核对店铺");
            return;
          }
        }
        if (!this.taskForm.shopStatus) {
          this.$msg.showToast("请先核对商品");
          return;
        }
        if (!this.taskForm.otherPay || this.taskForm.otherPay.indexOf(" ") >= 0) {
          this.$msg.showToast("实付金额不能为空");
          return;
        }
        if (
                parseInt(this.taskForm.otherPay) > 3000 ||
                parseInt(this.taskForm.otherPay) < 1
        ) {
          this.$msg.showToast("您填写的实付金额填写不对");
          return;
        }
        if (this.taskForm.payImg == "") {
          this.$msg.showToast("请先上传付款截图");
          return;
        }
        if (this.taskForm.payImg.indexOf("payImg") < 0) {
          this.$msg.showToast("未获取到付款截图，请重新上传");
          return;
        }
        if (
                !this.taskForm.orderNum ||
                this.taskForm.orderNum.indexOf(" ") >= 0
        ) {
          this.$msg.showToast("订单号不能为空");
          return;
        }
        if (this.list.shop_type == 1 || this.list.shop_type == 2) {
          var orderNumberArr = [18, 19];
          if (orderNumberArr.indexOf(this.taskForm.orderNum.length) < 0) {
            this.$msg.showToast("订单号填写错误");
            return;
          }
        }
        if (this.list.shop_type == 3) {
          if (this.taskForm.orderNum.length != 12) {
            this.$msg.showToast("订单号填写错误");
            return;
          }
        }
        if (this.list.shop_type == 13) {
          if (this.taskForm.orderNum.length != 14) {
            this.$msg.showToast("订单号填写错误");
            return;
          }
        }
        if (this.list.shop_type == 15) {
          if (this.taskForm.orderNum.length != 22) {
            this.$msg.showToast("订单号填写错误");
            return;
          }
        }
        if (this.shopDetailText.indexOf(this.list.shop_type) >= 0) {
          if (this.list.check_content) {
            if (this.writeCenterText == "") {
              this.$msg.showToast("请输入商品详情页文本的一个文字");
              return;
            }
            if (
                    this.originalCenterText != this.writeCenterText.replace(/\s*/g, "")
            ) {
              this.$msg.showToast("商品详情页文本核对失败");
              return;
            }
          }
        }
        if (!this.noteMatterStatus) {
          this.$msg.showToast("注意事项要全选");
          return;
        }
        uni.showLoading({
          title: "提交中...",
          mask: true,
        });
        this.loading = true;
        this.taskForm.shopStatus = this.taskForm.shopStatus ? 1 : 2;
        apiNewSubmitSaleTask(this.taskForm)
                .then((res) => {
                  uni.hideLoading();
                  if (res.data.code == 1) {
                    this.$msg.showToast(res.data.msg);
                    setTimeout(() => {
                      this.loading = false;
                      uni.switchTab({
                        url: "./taskList",
                      });
                    }, 1000);
                  } else if (res.data.code == 2025) {
                    this.loading = false;
                    this.$msg.showToast(res.data.msg);
                  } else if (res.data.code == 2026) {
                    this.loading = false;
                    // this.$msg.showToast(res.data.msg)
                    this.msg = res.data.msg;
                    this.showMsg = true;
                    // setTimeout(()=>{
                    // 	uni.switchTab({
                    // 		url: '../home/home'
                    // 	});
                    // },500)
                  } else if (res.data.code == 2099) {
                    let _this = this;
                    this.loading = true;
                    this.unflag = true;
                    this.unNum += 1;
                    this.untimer = setInterval(function () {
                      _this.untime--;
                      if (_this.untime == 0) {
                        clearInterval(_this.untimer);
                        _this.untime = 30;
                        _this.loading = false;
                        _this.unflag = false;
                        if (_this.unNum == 3) {
                          _this.$msg.showToast({
                            title: "订单待付款",
                            duration: 3000,
                          });
                          _this.unNum = 0;
                        }
                      }
                    }, 1000);
                    // this.$msg.showToast(res.data.msg)
                  } else if (res.data.code == 2000) {
                    this.$msg.showToast(res.data.msg);
                    this.list.order_status = 1
                    this.list.img_status = 1
                    this.taskForm.submitNum = 2
                    this.loading = false;
                  } else {
                    this.loading = false;
                    this.$msg.showToast(res.data.msg);
                  }
                })
                .catch((res) => {
                  uni.hideLoading();
                  this.loading = false;
                  this.$msg.showToast(res.data.msg);
                });
      },
      // 获取任务详情
      getTaskDetail() {
        apiSalesTaskDragDetail({
          token: this.token,
          pushTaskId: this.pushTaskId,
        })
                .then((res) => {
                  if (res.data.code == 1) {
                    this.list = res.data.msg;
                    this.list.sum_pay_money = this.list.deputyTaskIfo.reduce((oldVal, newVal) => {
                      // console.log("oldVal:",oldVal, "newVal:",newVal)
                      return (parseFloat(oldVal) + parseFloat(newVal.pay_money)).toFixed(2)
                    }, parseFloat(this.list.pay_money))
                    this.shopNameText = this.list.shop_name;
                    this.shopNameConfig = this.list.shop_name_config;
                    this.checkShopNameStatus = this.shopNameConfig == "1" ? false : true;
                    if (this.list.shop_type == 1 || this.list.shop_type == 2) {
                      this.stickType = parseInt(this.list.tkl_config);
                    } else if (this.list.shop_type != 1 && this.list.shop_type != 2) {
                      this.stickType = 4;
                    } else {
                      this.stickType = 2;
                    }

                    //商品标题进行处理
                    let goodsTitle = "";
                    for (let i in this.list.goods_title) {
                      if ((parseInt(i) + 1) % 2 != 0) {
                        goodsTitle += "*";
                      } else {
                        goodsTitle += this.list.goods_title[i];
                      }
                    }
                    if (goodsTitle.length > 15) {
                      goodsTitle = goodsTitle.substr(0, 20) + "...";
                    }
                    this.list.goods_title = goodsTitle;
                    //店铺名称处理
                    let shopName = "";
                    for (let i in this.list.shop_name) {
                      if ((parseInt(i) + 1) % 2 != 0) {
                        shopName += "*";
                      } else {
                        shopName += this.list.shop_name[i];
                      }
                    }
                    this.list.shop_name = shopName;
                    //汉字转拼音
                    var reg = /^[A-Za-z]+$/;
                    if (reg.test(this.list.keyword)) {
                      this.isLetter = true;
                    } else {
                      this.isLetter = false;
                    }
                    if (this.list.entrance_type == 1) {
                      if (
                              this.list.keyword.length > 6 ||
                              this.list.keyword.indexOf(" ") >= 0
                      ) {
                        this.keywordOptType = 1;
                      } else {
                        this.keywordOptType =
                                this.list.keyword_config == 0 ? 1 : this.list.keyword_config;
                        if (this.keywordOptType == 2) {
                          this.pyArr = pyconst.chineseToPinYin(this.list.keyword);
                        }
                      }
                    }
                    //商品详情五个字处理
                    if (this.list.check_content) {
                      this.originalBeforeText = this.list.check_content.substring(0, 2);
                      this.originalAfterText = this.list.check_content.substring(3, 5);
                      this.originalCenterText = this.list.check_content.substring(2, 3);
                    }
                    this.list.all_money = parseFloat(this.list.all_money).toFixed(2);
                    // let goodsImg = this.list.goods_img;
                    // if (goodsImg != null && goodsImg.indexOf("qiniu") != -1) {
                    //   goodsImg = goodsImg + "?imageView2/2/w/200";
                    // }
                    // this.getNewGoodsImg(goodsImg);
                    this.countTime(parseInt(this.list.task_over_time));
                    this.countdownNum = this.list.count_down
                            ? this.list.count_down
                            : 60;
                  }/* else if (res.data.code == 2024) {
            this.$msg.showToast(res.data.msg);
            setTimeout(() => {
              uni.switchTab({
                url: "../home/home",
              });
            }, 500);
          } else {
            this.$msg.showToast(res.data.msg);
            setTimeout(() => {
              uni.switchTab({
                url: "../home/home",
              });
            }, 500);
          }*/
                })
                .catch((res) => {
                  this.$msg.showToast(res.data.msg);
                });
      },
      countTime(leftTime) {
        var that = this;
        var remain, hour, minute, second;
        remain = leftTime % 86400;
        hour = parseInt(remain / 3600);
        //计算分钟数
        remain = remain % 3600;
        minute = parseInt(remain / 60);
        //计算秒数
        second = remain % 60;
        that.timer = setInterval(function () {
          // var leftTime = end - now //时间差
          if (leftTime >= 0) {
            second = second - 1;
            if (second == -1) {
              second = 59;
              minute = minute - 1;
            } else if (minute == -1) {
              minute = 59;
              hour = hour - 1;
            }
            if (hour == 0 && minute == 0 && second == 0) {
              that.taskHourTime = "00";
              that.taskSecondTime = "00";
              that.taskMinuteTime = "00";
              clearInterval(that.timer);
              that.giveUpForm.giveUpType = 6;
              that.taskGiveUp();
              return;
            }
            that.taskHourTime = that.spliceTime(hour);
            that.taskSecondTime = that.spliceTime(second);
            that.taskMinuteTime = that.spliceTime(minute);
          } else {
            clearInterval(that.timer);
            that.giveUpForm.giveUpType = 6;
            that.taskGiveUp();
          }
        }, 1000);
      },
      spliceTime(time) {
        if (time < 10) {
          time = "0" + time;
        }
        return time;
      },
      // 放弃任务
      taskGiveUp() {
        apiGiveUpTask(this.giveUpForm)
                .then((res) => {
                  this.showGiveUpTaskModal = false;
                  if (res.data.code == 1) {
                    this.$msg.showToast("放弃成功");
                    setTimeout(() => {
                      uni.switchTab({
                        url: "../home/home",
                      });
                    }, 500);
                  } else {
                    this.$msg.showToast(res.data.msg);
                  }
                })
                .catch((res) => {
                  this.$msg.showToast(res.data.msg);
                });
      },
      matchCenterText() {
        if (this.writeCenterText == "") {
          this.$msg.showToast("请输入商品详情页文本的一个文字");
          return;
        }
        if (this.originalCenterText == this.writeCenterText) {
          this.matchTextStatus = true;
        } else {
          this.matchTextStatus = false;
          this.$msg.showToast("核对失败");
        }
      },
      // 打码
      getNewGoodsImg(id, img) {
        let _this = this
        uni.getImageInfo({
          src: img,
          success: function (res) {
            //绘制背景图
            uni.getImageInfo({
              src: "../../static/img/msk_img.png",
              success: function (msk) {
                //绘制背景图
                let ctx = uni.createCanvasContext(id);
                ctx.drawImage(res.path, 0, 0, 100, 100);
                if (_this.list.shop_type != 20) {
                  // 非抖音托N需要打码
                  ctx.drawImage(msk.path, 30, 30, 40, 40);
                }
                ctx.draw();
              },
            });
          },
        });
      },
      copyKeyword(id) {
        if (this.keywordOptType == 1) {
          uni.setClipboardData({
            data: id,
            success: (data) => {
              this.$msg.showToast("复制成功");
            },
            fail: function (err) {
            },
            complete: function (res) {
            },
          });
        } else {
          this.$msg.showToast("请手动输入关键词到搜索框");
        }
      },
      checkCountdown() {
        this.checkTimer = setInterval(() => {
          this.countdownNum--;
          if (this.countdownNum <= 0) {
            this.clearCheckTimeOut();
            return;
          }
        }, 1000);
      },
      clearCheckTimeOut() {
        clearTimeout(this.checkTimer);
        this.isShowModal = false;
        this.checkTimer = null;
      },
      // 核对链接(id:商品id)
      matchGoods(id, tbPassword, index) {
        if (!this.tbPassword) {
          this.$msg.showToast("请先输入需要核对的内容");
          return;
        }
        apiInquiryTbGoodsName({
          token: this.token,
          pushTaskId: this.pushTaskId,// 任务
          tbPassword,// 校验链接
          planType: this.list.plan_type, // 1：销量 2：流量 3：评论
          productId: id// 商品id
        })
                .then((res) => {
                  if (res.data.code == 1) {
                    this.show[index] = true
                    this.$msg.showToast(res.data.msg);
                    if (this.show.length == (this.list.deputyTaskIfo.length + 1)) {
                      let flag = false
                      for (var i=0, len=this.show.length; i<len; i++) {
                        if (!this.show[i]) flag = true
                      }
                      if (!flag) {
                        this.taskForm.shopStatus = true;
                        this.isShowModal = true;
                      }
                    }
                    // this.checkCountdown();
                  } else {
                    // this.taskForm.shopStatus = false;
                    this.$msg.showToast(res.data.msg);
                  }
                })
                .catch((res) => {
                  this.$msg.showToast(res.data.msg);
                });
      },
      chooseImage() {
        uni.chooseImage({
          count: 1,
          sizeType: ["origial"],
          success: (res) => {
            this.uploadImg(res, res.tempFiles[0].size > 1570000);
          },
          fail: function () {
            this.$msg.showToast("载入图片失败，请稍后再试");
          },
        });
      },
      uploadImg(typeimg, fileSize) {
        var that = this;
        uni.showLoading({
          title: "上传中",
          mask: true,
        });
        uni.getImageInfo({
          src: typeimg.tempFilePaths[0],
          success(res) {
            let canvasWidth = res.width; //图片原始长宽
            let canvasHeight = res.height;
            let img = new Image();
            img.src = res.path;
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            let scale = res.height / res.width;
            canvas.width = fileSize == true ? 500 : canvasWidth;
            canvas.height = fileSize == true ? 500 * scale : canvasHeight;
            ctx.drawImage(
                    img,
                    0,
                    0,
                    fileSize == true ? 500 : canvasWidth,
                    fileSize == true ? 500 * scale : canvasHeight
            ); //fileSize == true ? 300 : canvasHeight / 2

            canvas.toBlob(function (fileSrc) {
              let imgSrc = window.URL.createObjectURL(fileSrc);
              var random = Math.floor(Math.random() * (1000 - 1)) + 1;
              var timestamp = new Date().getTime();
              var name = imgSrc.substring(imgSrc.lastIndexOf("-") + 1);
              var key = name + random.toString() + timestamp.toString() + ".png";
              qiniuUploader.upload(
                      imgSrc,
                      (res) => {
                        //图片上传完成后返回值
                        that.taskForm.payImg = res.imageURL;
                        that.$msg.showToast("上传成功");
                      },
                      (error) => {
                        // resolve(error)
                        uni.hideLoading();
                        that.$msg.showToast("上传失败");
                      },
                      {
                        region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
                        domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
                        key: "payImg/" + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
                        // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
                        uptoken: that.uploadToken, // 由其他程序生成七牛 uptoken
                      },
                      (res) => {
                        //上传进度
                        if (res.progress === 100) {
                          uni.hideLoading();
                        }
                      }
              );
            });
          },
          fail(err) {
            that.$msg.showToast(err.errMsg);
            uni.hideLoading();
          },
        });
      },
      checkboxChange: function (e) {
        var values = e.detail.value;
        for (var i = 0, lenI = this.noteMatterList.length; i < lenI; ++i) {
          const item = this.noteMatterList[i];
          if (values.includes(item.value)) {
            this.$set(item, "checked", true);
          } else {
            this.$set(item, "checked", false);
          }
        }
        values.length === 3
                ? (this.noteMatterStatus = true)
                : (this.noteMatterStatus = false);
      },
      getShopName(type) {
        return this.storeName[type];
      },
      getShopName2(type) {
        return this.storeName2[type];
      },
      reasonChange(evt) {
        for (let i = 0; i < this.giveUpReason.length; i++) {
          if (this.giveUpReason[i].value === evt.target.value) {
            this.checkReason = i;
            this.giveUpForm.giveUpType = this.giveUpReason[i].value;
            break;
          }
        }
      },
      showGiveUpModal() {
        this.showGiveUpTaskModal = true;
      },
      saveImg(url) {
        if (uni.getStorageSync("mobilePlatformType") == "APP") {
          uni.showLoading({
            title: "下载中",
            mask: true,
          });
          let filename = Math.random() + ".png";
          plus.downloader
                  .createDownload(
                          url,
                          {
                            filename: "_downloads/" + filename,
                          },
                          (download, status) => {
                            if (status == 200) {
                              //下载成功
                              plus.gallery.save(download.filename, () => {
                                uni.hideLoading();
                                uni.showToast({
                                  title: "下载成功！",
                                });
                              });
                            }
                          }
                  )
                  .start();
        }
      },
      showImg(url) {
        window.location.href = url;
      },
    },
  };
</script>

<style lang="scss">
page {
  background: #f5f5f5;
}
#sales-task {
  .shop-name {
    font-size: 40upx !important;
    margin-bottom: 24upx;
    color: red !important;
    font-weight: bold !important;
    line-height: normal !important;
  }
  .task-time-box {
    display: flex;
    background: #ffefdc;
    padding: 20upx 32upx;
    align-items: center;
    margin-bottom: 20upx;
    .left-box {
      flex: 1;
      .title {
        font-size: 24upx;
        font-family: PingFang-SC-Medium, PingFang-SC;
        font-weight: 500;
        color: $theme-color;
        line-height: 34upx;
      }
      .time-box {
        color: $theme-color;
        font-size: 20upx;
        margin: 18upx 0;
        .time {
          font-size: 20upx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 28upx;
          background: $theme-color;
          border-radius: 4upx;
          padding: 4upx;
        }
      }
      .account {
        font-size: 28upx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: $theme-color;
        line-height: 28upx;
      }
    }
    .give-up-btn {
      width: 152upx;
      height: 60upx;
      font-size: 26upx;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #ff5001;
      line-height: 60upx;
      border-radius: 30upx;
      border: 1px solid #ff5001;
      text-align: center;
    }
  }
  .card {
    padding: 20upx 30upx;
    background: #ffffff;
    margin: 0 30upx 12upx 30upx;
    border-radius: 24upx;
    .card-title {
      color: $theme-color;
      .icon-style {
        display: inline-block;
        margin-right: 10upx;
      }
      .title {
        display: inline-block;
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff5001;
        line-height: 28upx;
      }
    }
    .card-content {
      .card-row {
        border-top: 1px solid #e9e9e9;
        padding: 24upx 0;
      }
      .keyword-text {
        color: $theme-color;
        font-weight: 500;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        font-size: 30upx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
        width: 460upx;
      }
      .pinyin {
        margin-top: 10upx;
        .letter {
          margin-right: 16upx;
        }
      }
      .qrcode-box {
        border-bottom: 1px solid #e9e9e9;
      }
      .card-row-container {
        border-bottom: 1px solid #e9e9e9;
        padding: 24upx 0;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        display: flex;
        font-size: 28upx;
        .row-title {
          color: #666666;
          margin-right: 20upx;
          font-weight: 400;
        }

        .row-content {
          flex: 1;
          .black-style {
            font-weight: 500;
            color: #333333;
          }
          .theme-style {
            color: $theme-color;
            font-weight: 500;
          }
          .copy-btn-box {
            text-align: right;
            margin-top: 10upx;
            .copy-btn {
              font-size: 22upx;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 32upx;
              background: #f5f5f5;
              border-radius: 18upx;
              padding: 3px 20upx;
              display: inline-block;
            }
          }
        }
      }
      .goods-title {
        font-size: 30upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 32upx;
        margin-top: 24upx;
      }
      .goods-info {
        margin-top: 32upx;
        display: flex;
        .goods-img,
        #firstCanvas {
          width: 220upx;
          height: 220upx;
        }
        .goods-param-box {
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #666666;
          line-height: 26upx;
          display: inline-block;
          margin-left: 32upx;
          vertical-align: top;
          .goods-param:nth-child(1),
          .goods-param:nth-child(2),
          .goods-param:nth-child(3) {
            margin-bottom: 26upx;
          }
          .goods-param {
            font-size: 28upx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            line-height: 28upx;
            .content {
              color: #333333;
            }
            .content-price {
              color: $theme-color;
            }
          }
        }
      }
      .note {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 44upx;
      }
      .qrcode-img {
        width: 260upx;
        height: 260upx;
        margin: 20upx auto;
      }
      .require-box {
        display: flex;
        .require-icon {
          color: $theme-color;
          display: inline-block;
          font-size: 24upx;
          margin-right: 10upx;
          margin-top: 4upx;
        }
        .require-content {
          display: inline-block;
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $theme-color;
          line-height: 36upx;
        }
      }
      .shop-name-box {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 40upx;
        margin-bottom: 26upx;
        margin-top: 24upx;
        .name {
          font-weight: 500;
          color: #333333;
        }
      }
      .tips {
        font-size: 24upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: $theme-color;
        line-height: 24upx;
        margin-top: 10upx;
      }
      .marginStyle {
        margin: 20upx 0;
      }
      .step {
        color: red;
        .click-icon {
          display: inline-block;
          font-size: 28upx;
        }
        .step {
          display: inline-block;
          font-size: 28upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          line-height: 28upx;
          margin-top: 28upx;
        }
      }
      .card-input-box {
        display: flex;
        margin-top: 12upx;
        align-items: center;
        .input-box {
          position: relative;
          flex: 1;
        }
        .input {
          height: 72upx;
          background: #ffffff;
          border-radius: 10upx;
          border: 1px solid #dfdfdf;
          padding-left: 32upx;
          font-size: 28upx;
        }

        .clear-btn {
          width: 34upx;
          height: 34upx;
          position: absolute;
          right: 4upx;
          top: 12upx;
          padding: 10upx;
          background: #fff;
        }
        .check-btn {
          width: 200upx;
          height: 72upx;
          background: #ff8c00;
          border-radius: 10upx;
          font-size: 28upx;
          font-family: PingFang-SC-Medium, PingFang-SC;
          font-weight: 500;
          color: #ffffff;
          line-height: 72upx;
          margin-left: 20upx;
        }
      }

      .small-title {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        line-height: 40upx;
        color: #666666;
        font-weight: 400;
        margin-right: 12upx;
      }
      .center-text-box {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 40px;
        .center-text-input {
          width: 160upx;
          height: 72upx;
          background: #ffffff;
          border-radius: 10upx;
          border: 1px solid #dfdfdf;
          padding-left: 32upx;
          font-size: 28upx;
          display: inline-block;
          vertical-align: middle;
          margin: 0 16upx;
        }
      }
      .upload-img-box {
        width: 400upx;
        margin-top: 20upx;
        margin-bottom: 24upx;
        .upload-img {
          border: 1px dashed #e0e0e0;
          width: 400upx;
        }
        .upload-icon {
          border: 1px dashed #e0e0e0;
          width: 320upx;
          height: 400upx;
          text-align: center;
          line-height: 400upx;
          font-size: 60upx;
          color: #949494;
        }
      }
      .uni-list {
        font-size: 28upx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 36upx;
        .uni-list-cell {
          margin-right: 0 !important;
          margin-bottom: 24upx;
          .other-font {
            color: $theme-color;
          }
        }
      }
    }
  }
  .sumbit-btn {
    margin: 32upx;
    height: 96upx;
    background: $theme-background-color;
    border-radius: 10upx;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 96upx;
    margin-top: 48upx;
  }
  .match-modal-title {
    font-size: 28upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: $theme-color;
    margin-bottom: 10upx;
  }
  .match-modal-countdown {
    text-align: center;
    font-size: 32upx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    color: $theme-color;
    margin: 20upx 0;
  }
  .match-modal-task-info {
    font-size: 26upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    padding: 10upx 0;
  }
  .match-modal-tips {
    font-size: 26upx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: $theme-color;
    padding: 10upx 0;
  }
}
</style>
